var playlist = [{"name":"传奇","singer":"王菲","src":"传奇.mp3","pic":"wf.png","tim":"4:51"},
{"name":"知道不知道","singer":"刘若英","src":"知道不知道.mp3","pic":"lry.jpg","tim":"4:13"}]
var song = document.getElementById("song")
var singer = document.getElementById("singer")
var star = document.getElementById("star")
var startTime = document.getElementById("startTime")
var endTime = document.getElementById("endTime")
var leftKey = document.getElementById("leftKey")
var middleKey = document.getElementById("middleKey")
var rightKey = document.getElementById("rightKey")
var audio = document.querySelector('audio')
var input1 = document.getElementById("input1")
var baccol = document.getElementById("baccol")
var input2 = document.getElementById("input2")

//切歌改变显示及播放源的函数
function startPlay(item){
    song.innerHTML = item.name
    singer.innerHTML = item.singer 
    startTime.innerHTML = '0:00'
    endTime.innerHTML = item.tim
    star.src = 'img/' + item.pic
    baccol.src = 'img/' + item.pic
    audio.src = 'mp3/' + item.src
    audio.play()
    middleKey.src = 'img/play.png'
    star.classList.add('firstClass')
}
startPlay(playlist[0])

//记录当前播放歌曲，实现循环切换的功能
var current = 0
function changeSong(){
	 current ++ 
	 if(current >= playlist.length){
	     current = 0
	 }
	 startPlay(playlist[current])
}

//实现中键播放与暂停的功能
function playOrPause(){
	if(audio.paused){
		audio.play()
		middleKey.src = 'img/play.png'
		star.classList.add('firstClass')
	}
	else{
		audio.pause();
		middleKey.src = 'img/pause.png'
		star.classList.remove('firstClass')
	}
}

//时间的改变
function changeprogress(){
	input1.value = audio.currentTime
	var min = audio.currentTime / 60
    min = parseInt(min)
    min = min < 60 ? 0 : min
	var sec = audio.currentTime % 60
    sec = parseInt(sec)
    sec = sec < 10 ? ('0' + sec) : sec;
    startTime.innerHTML = min + ':' + sec
}

//添加播放列表
function list(){
	var section = document.createElement('section')
	section.style.position = 'relative'
	section.style.width = '100%'
	section.style.height = '50%'
	section.style.backgroundColor = 'black'
	section.style.opacity = '0.65'
	section.style.position = 'fixed'
	section.style.bottom = '0'
	document.body.appendChild(section)
	var p = document.createElement('p')
	p.style.textAlign = 'center'
	p.style.color = 'white'
	p.innerHTML = '播放列表'
	section.appendChild(p)
	var hr = document.createElement('hr')
	section.appendChild(hr)
	var p1 = document.createElement('p')
	p1.innerHTML = '传奇-王菲'
	p1.style.color = 'white'
	p1.style.textIndent = '2em'
	section.appendChild(p1)
	var p2 = document.createElement('p')
	var hr = document.createElement('hr')
	section.appendChild(hr)
	p2.innerHTML = '知道不知道-刘若英'
	p2.style.color = 'white'
	p2.style.textIndent = '2em'
	section.appendChild(p2)
	var hr = document.createElement('hr')
	section.appendChild(hr)
	var p3 = document.createElement('p')
	p3.style.position = 'absolute'
	p3.style.bottom = '0'
	p3.style.left = '47%'
	p3.style.textAlign = 'center'
	p3.style.color = 'white'
	p3.innerHTML = '关闭'
	section.appendChild(p3)
	function removeTag(){
		section.remove()
	}
	p3.onclick = removeTag
	function changeSongOne(){
		song.innerHTML = '传奇'
	    singer.innerHTML = '王菲' 
	    startTime.innerHTML = '0:00'
	    endTime.innerHTML = '4:15'
	    star.src = 'img/wf.png'
	    baccol.src = 'img/wf.png'
	    audio.src = 'mp3/传奇.mp3'
	    audio.play()
	    middleKey.src = 'img/play.png'
	}
	p1.onclick = changeSongOne
	function changeSongTwo(){
		song.innerHTML = '知道不知道'
	    singer.innerHTML = '刘若英' 
	    startTime.innerHTML = '0:00'
	    endTime.innerHTML = '4:13'
	    star.src = 'img/lry.jpg'
	    baccol.src = 'img/lry.jpg'
	    audio.src = 'mp3/知道不知道.mp3'
	    audio.play()
	    middleKey.src = 'img/play.png'
	}
	p2.onclick = changeSongTwo
}

input2.onchange = function(){
	audio.volume = this.value / 100
}
input1.onchange = function(){
	startTime.innerHTML = this.value 
}

leftKey.addEventListener('click',changeSong)
rightKey.addEventListener('click',changeSong)
middleKey.addEventListener('click',playOrPause)
audio.addEventListener('timeupdate',changeprogress)
star.addEventListener('click',list)
